<template>
  <div class="user-auth">
    <el-form class="query-form" size="small" inline>
      <el-form-item label="状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择" @change="handleQuery">
          <el-option label="全部" :value="null" />
          <el-option label="已通过" :value="1" />
          <el-option label="已驳回" :value="2" />
          <el-option label="待审核" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item class="big-query" label="关键词" prop="param">
        <el-input v-model="queryParams.param"
          placeholder="输入用户ID、用户昵称、手机号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          @clear="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dataList" style="width:100%">
      <el-table-column label="用户ID" min-width="100" prop="user_id" />
      <el-table-column label="用户昵称" min-width="110" prop="nickname" />
      <el-table-column label="手机号" min-width="120" prop="phone_number" />
      <el-table-column label="身份证号" min-width="180" prop="id_card_no" />
      <el-table-column label="实名状态"
         min-width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state===1? 'success' : scope.row.state===2?'danger':''">{{ scope.row.state|filterStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleAuth(scope.row)" :disabled="!!scope.row.state">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
    <el-dialog title="审核" :visible.sync="openAuth" width="700px" :close-on-click-modal="false" @closed="handleAuthClose">
      <el-form ref="authForm" :model="authForm" label-width="120px" label-suffix="：">
        <el-form-item label="用户昵称">
          <span>{{authForm.nickname}}</span>
        </el-form-item>
        <el-form-item label="审核结果" prop="state">
          <el-radio-group v-model="authForm.state">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="authForm.remarks"
            maxlength="30"
            show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAuth" :loading="saveLoging">确 定</el-button>
        <el-button @click="openAuth = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { userAuthList, auditUser } from '@/api/user/user'
export default {
  name: 'UserAuth',
  data () {
    return {
      saveLoging: false,
      openAuth: false,
      loading: false,
      queryParams: {
        param: '',
        state: 3,
        pageIndex: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0,
      authForm: {
        id: null,
        nickname: '',
        'state': 1,
        'remarks': ''
      }
    }
  },
  filters: {
    filterStatus (val) {
      const arr = ['待审核', '已通过', '已驳回']
      return arr[val]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleQuery () {
      this.pageIndex = 1
      this.getList()
    },
    getList () {
      this.loading = true
      userAuthList(this.queryParams).then(res => {
        const data = res.data || {}
        this.dataList = data.list || []
        this.total = data.count
      }).finally(() => {
        this.loading = false
      })
    },
    handleAuth (row) {
      this.authForm.id = row.id
      this.authForm.nickname = row.nickname
      this.openAuth = true
    },
    submitAuth () {
      this.saveLoging = true
      auditUser(this.authForm).then(() => {
        this.openAuth = false
        this.getList()
        this.msgSuccess('审核成功')
      }).finally(() => {
        this.saveLoging = false
      })
    },
    handleAuthClose () {
      this.$refs.authForm.resetFields()
    }
  }
}
</script>
